<template>
  <div>
    <van-nav-bar
      title="标题"
      :left-text="isEdit ? '完成' : '编辑'"
      @click-left="isEdit = !isEdit"
    />
    <van-row v-for="item in $store.state.shopcar" :key="item.id">
      <van-col span="4">
        <input type="checkbox" v-model="item.status" @change="changeItem" />
      </van-col>
      <van-col span="20">
        <van-card
          :num="item.num"
          :price="item.minPrice"
          :title="item.name"
          :thumb="item.pic"
        >
          <template #footer>
            <van-stepper v-model="item.num" />
          </template>
        </van-card>
      </van-col>
    </van-row>

    <div class="box">
      <my-good v-for="item in ranList" :key="item.id" :item="item"></my-good>
    </div>

    <van-submit-bar
      :price="3050"
      :button-text="isEdit ? '删除' : '下单'"
      @submit="onSubmit"
    >
      <van-checkbox v-model="$store.state.checked" @click="checkall"
        >全选</van-checkbox
      >
    </van-submit-bar>
  </div>
</template>

<script>
import { ref, reactive, toRefs } from "vue";
import { useStore } from "vuex";
import { useRouter, useRoute } from "vue-router";
import { getList } from "../utils/yx";
import myGood from "../components/myGood.vue";
export default {
  setup(props, ctx) {
    const store = useStore();
    const router = useRouter();
    const route = useRoute();
    const data = reactive({
      isEdit: false,
      //是否编辑
      ranList: [],
      //随机的列表
    });
    const changeItem = () => {
      store.commit("changeItem");
    };
    const checkall = () => {
      store.commit("checkall");
    };

    const onSubmit = () => {
      if (data.isEdit) {
        store.commit("del");
      }
    };

    getList().then((res) => {
      let a = Math.floor(Math.random() * 24);
      // Math.random()生成0-1的随机数 乘24 再向下取整就是0-23的随机数
      data.ranList = res.data.splice(a, 4);
      //   参数是开始位置和要截的个数
      //   data.ranList = res.data.slice(a, a+4);
      //   参数是开始位置和结束的位置
      console.log(data.ranList);
    });
    return { ...toRefs(data), changeItem, checkall, onSubmit };
  },
  components: {
    myGood,
  },
};
</script>

<style lang="scss">
.box {
  display: flex;
  flex-wrap: wrap;
  > div {
    width: 50%;
    img {
      width: 100%;
      height: 200px;
    }
  }
}
</style>
